class Swiper {
    constructor(el, options) {
        this.el = document.querySelector(el);
        this.num = 1;
        this.t = null;
        this.options = options
        this.init();
    }
    init() {
            this.uodataNode();
            this.defaultConfig();
            this.autoImg();
            this.yqTb();
            this.yqOverOut();
            this.imgStop();
        }
        //获取所有的li和img
        //注意：是有需要重新获取的元素可以通过方法，写进来，正常都是直接写在constructor里面。
        //应用场景，删除，增加的时候，需要重新获取对象，qs不具有实时性
        //次数不需要重新获取，只是为了写了留个印象，
    uodataNode() {
        this.imgS = this.el.querySelector("img");
        this.ulLi = this.el.querySelectorAll("ul li");

    }
    defaultConfig() {
        this.ulLi.forEach((item) => {
            item.style.background = this.options.pifu
        })
    }
    autoImg() {
        this.t = setInterval(() => {
            this.num++;
            if (this.num > 6) this.num = 1;
            this.imgS.src = `./image/img${this.num}.jpg`;
            this.yqTb();
        }, 500)
    }
    yqTb() {
        this.ulLi.forEach((item) => {
            item.className = "";
        })
        this.ulLi[this.num - 1].className = "active"
    }
    yqOverOut() {
        // 思路
        // 获取ul li标签，划入的时候
        // 1、清除定时器
        // 2、更改当前页面
        // 移除的时候
        // 1、恢复定时器
        // 2、更改num
        this.ulLi.forEach((item, index) => {
            item.onmouseover = () => {
                    clearInterval(this.t)

                    this.el.querySelector("img").src = `./image/img${index+1}.jpg`;
                    let ulLi = this.el.querySelectorAll("ul li") //为什么还要再获取一次遍历一次
                    this.el.querySelector('ul li.active').className = ''
                    ulLi[index].className = "active";
                }
                // ulLi[this.num].className = "active"
                // ulLi[index].setAttribute('class', 'active')
            item.onmouseout = () => {
                this.autoImg();
                this.num = index + 1
            }
        })
    }
    imgStop() {
        this.imgS.onmouseover = () => {
            clearInterval(this.t)
        }
        this.imgS.onmouseout = () => {
            this.autoImg()
        }
    }
}